<style>
  
    label.error{
        color:red;
        float:right;
        width:200px;
     
    }
    .css_a{
    background-color: red;
    border: 1px solid #B0AFAF;
    color: #fff;
    margin-top:5px;
    line-height:25px;
    padding: 5px 20px;    
    }
</style>
<script>
    $().ready(function(){
        $('#login_form').validate({
            rules:{
                txt_ht : {required:true},
                txt_address : {required:true},
                txt_phone : {required:true, number: true},
                txt_email : {required:true, email: true},
                txt_ghichu : {required:true},
                captcha_code : {required:true}
                 
            },
             messages : {
                txt_ht : {
                    required : "Bạn nhập họ tên"
                },
                txt_address : {
                    required : "Bạn nhập địa chỉ",
                },
                txt_phone : {
                    required : "Bạn nhập phone",
                    number : "Bạn nhập phone phải là số",
                },
                txt_email : {
                    required : "Bạn nhập email",
                    email : "Bạn nhập email chưa đúng",
                },
                txt_ghichu : {
                    required : "Bạn nhập nội dung ghi chú",
                },
                captcha_code : {
                    required : "Bạn nhập capcha",
                }
            },
            submitHandler: function(form) {
                var name = $('#txt_ht').val();
                var address = $('#txt_address').val();
                var phone = $('#txt_phone').val();
                var email = $('#txt_email').val();
                var comment = $('#txt_ghichu').val();
                var capcha_code = $('#captcha_code').val();
                
                var dataString = 'email='+email +'&name='+name+'&address='+address+'&phone='+phone+'&comment='+comment+'&capcha_code='+capcha_code;
               $('.load').html('<img src="<?php echo base_url()?>public/images/loading.gif" />');          
               $.ajax({
                type : "GET",
                dataType : "json",
                url : "<?php echo base_url().'butbi/cart/xuly'?>",
                data : dataString,
                success : function(result){
                    $('.load').html('');   
                    $('#txt_ht').val('');
                    $('#txt_address').val('');
                    $('#txt_phone').val('');
                    $('#txt_email').val('');
                    $('#txt_ghichu').val();
                    alert(result.status);
                    return false;
                } 
               });
            },
            
        });
        
    });
</script>
<div class="right">
          <div class="category2">  
<br style="clear:both">

	<div style="float: left; width:600px; padding:5px; border:1px solid blue; margin:5px;">
    	<div class="load" style="position: absolute; top: 344px;  left:498px; z-index:9999"></div>
    	<form name="login_form" id="login_form"  method="post" action="">
    	<table style="padding:5px">    
        	<span id="login_error" style="text-align:center; font-weight:bold">Yêu cầu bạn điền đầy đủ thông tin</span>
            <div style="clear:both"></div>
        	<tr>
            	<td colspan="2"  align="center"></td>
                
            </tr>    	
        	<tr>
            	<td>Họ và tên:</td>
                <td><input type="text" name="txt_ht" id="txt_ht" style="width:200px"></td>
            </tr>
            <tr>
            	<td>Email:</td>
                <td><input type="text" name="txt_email" id="txt_email" style="width:200px"></td>
            </tr>
            <tr>
            	<td>Số điện thoại:</td>
                <td><input type="text" name="txt_phone" id="txt_phone" style="width:200px"></td>
            </tr>
             <tr>
            	<td>Địa chỉ:</td>
                <td><input type="text" name="txt_address" id="txt_address" style="width:200px"></td>
            </tr>            
            <tr>
            	<td>Ghi chú</td>
                <td><textarea name="txt_ghichu" id="txt_ghichu" style="width: 395px; height: 111px;"></textarea></td>
            </tr>
            <tr>             
                <td></td>
                <td>
                    <img style="vertical-align: bottom;" id="captcha" src="<?php echo base_url(); ?>public/securimage/securimage_show.php" alt="CAPTCHA Image" />

                </td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#" id="dif_image_command" onclick="document.getElementById('captcha').src = '<?php echo base_url(); ?>public/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>
               </td>
            </tr>
            <tr>
                <td>Capcha</td>
                <td><input type="text" placeholder="Capcha (*)" name="captcha_code" id="captcha_code" size="20" maxlength="6" /></td>
            </tr>
             <tr>
            	<td></td>
                
                <input type="hidden" name="txt_cart" id="txt_cart" value="<?php echo $cart;?>">
                
                <td><a href="javascript:void(0)" onclick="$('#login_form').submit()" id="send" class="css_a">Thanh toán</a></td>
            </tr>
        </table>
        </form>
    </div>	
</div>
</div>
  <p style=" clear:both"></p> 